/**
 * Created by liubin on 2015/10/11.
 */
'use strict';

import React from 'react';
import ReactMixin from 'react-mixin';
import { Link } from 'react-router';
import Joi from 'joi';
import JoiOption from '../../tools/joiOption';
import joiValidator from '../../tools/joiValidator';
import Autobind from 'tools/autobindMixin';
import $ from 'jquery';

const schema = {
    name: JoiOption(Joi.string().required().label('名称'))
};

@ReactMixin.decorate(Autobind)
class RoleView extends React.Component {
    /**
     * 传入参数限制
     * @type {{roleActions: *, roleStore: *, history: *, params: *}}
     */
    static propTypes = {
        roleActions: React.PropTypes.object,
        roleStore: React.PropTypes.object,
        handleBack: React.PropTypes.func,
        history: React.PropTypes.object.isRequired,
        params: React.PropTypes.object.isRequired
    }
    /**
     * 渲染 xeditable
     */
    renderEditable() {
        // 绑定更新函数
        const name = React.findDOMNode(this.refs.name);
        //const name = React.findDOMNode(this.refs.name);
        const { roleActions: { modifyRole }, roleStore } = this.props;
        let role = roleStore.get('role');
        $(name).editable({
            mode: 'popup',
            emptytext: '空',
            url: params => {
                const d = new $.Deferred;
                role = role.set('name', params.value);
                modifyRole(role, d);
                return d.promise();
            },
            validate: value => {
                const errors = joiValidator(schema)({name: value});
                console.log(errors);
                return errors['name'];
            }
        });
    }
    componentDidMount() {
        const { roleActions: { getRole }, params: { id } } = this.props;
        getRole(id, this.renderEditable);
    }
    render(){
        const { roleStore, handleBack } = this.props;
        return (
            <Grid>
                <Row>
                    <Col sm={12}>
                        <Breadcrumb>
                            <BLink><Link to='/'>主页</Link></BLink>
                            <BLink><Link to='/role'>权限</Link></BLink>
                            <BLink active>权限编辑</BLink>
                        </Breadcrumb>
                    </Col>
                </Row>
               <Row>
                   <Col sm={10} md={9} lg={8}>
                       <PanelContainer plain className='plain-panel' controlStyles='bg-blue fg-white'>
                            <PanelHeader className='bg-blue fg-white'>
                                <Grid>
                                    <Row>
                                        <Col xs={12}>
                                            <h4>权限编辑</h4>
                                        </Col>
                                    </Row>
                                </Grid>
                            </PanelHeader>
                            <PanelBody style={{paddingBottom: 10}}>
                                <Grid>
                                    <Row>
                                        <Col xs={12}>
                                            <Table striped bordered style={{margin: 0}}>
                                                <tbody>
                                                    <tr>
                                                      <td style={{width: 300}}>编码</td>
                                                      <td>
                                                          {roleStore.getIn(['role', 'code'])}
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td style={{width: 300}}>名称</td>
                                                      <td>
                                                        <a ref='name' href='javascript:' className='xeditable' data-type='text' data-title='名称:'>{roleStore.getIn(['role', 'name'])}</a>
                                                      </td>
                                                    </tr>
                                                </tbody>
                                            </Table>
                                            <ButtonToolbar style={{display: 'inline-block', marginTop:10}} >
                                                <Button type='button' bsStyle='default' onClick={handleBack}>返回</Button>
                                            </ButtonToolbar>
                                        </Col>
                                    </Row>
                                </Grid>
                            </PanelBody>
                        </PanelContainer>
                   </Col>
               </Row>
           </Grid>
        );
    }
}
export default RoleView;